<template>
    <div>
        <el-card v-if="!result">
            <el-form label-width="100px" style="width: 700px;">
                <el-form-item label="分隔符">
                    <el-input v-model="data.split"/>
                </el-form-item>
                <el-form-item label="跳过行数">
                    <el-input-number v-model="data.jumpRows"/>
                </el-form-item>
                <el-form-item label="模板文件">
                    <input type="file" ref="file"/>
                </el-form-item>
                <el-form-item label="一维码使用列">
                    <el-input v-model="data.code0" placeholder="从0开始"/>
                </el-form-item>
                <el-form-item label="二维码使用列">
                    <el-input v-model="data.code1" placeholder="从0开始，以逗号分隔"/>
                </el-form-item>
                <div >
                    <el-button type="primary" @click="make">生成</el-button>
                </div>
            </el-form>
        </el-card>

        <div v-if="result" class="result">
            <el-button @click="print" v-show="showPrint">打印</el-button>
            <div v-for="v in result" class="item">
                <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
                    <font style="font-size: 24px">
                        {{v[0]}}
                    </font>
                    <img :src="v[1]" alt="">
                </div>
                <div style="display: flex; flex-direction: row; justify-content: center; align-items: center">
                    {{v[2]}}
                    <img :src="v[3]" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "qrcode-maker",
        data() {
            return {
                data:{
                    split: "**",
                    jumpRows: 0,
                    code0: "",
                    code1: ""
                },
                result: false,
                showPrint: true
            }
        },
        methods:{
            async make(){
                var formData = new FormData();
                for(var i in this.data){
                    formData.append(i, this.data[i])
                }
                formData.append("file", this.$refs.file.files[0])
                var t = this
                $.ajax({
                    url:"/api/tools/qrcode-maker/make",
                    type:"POST",
                    data:formData,
                    processData:false,   //  告诉jquery不要处理发送的数据
                    contentType:false,   // 告诉jquery不要设置content-Type请求头
                    success:function(data){
                        if(data.success){
                            t.result = data.data
                            // setTimeout(() => {
                            //     window.print()
                            // }, 1000)
                        }
                    },
                    error:function(data){

                    }
                });
                // this.result = true
                // this.$nextTick(_ => print())
            },

            print(){
                this.showPrint = false
                this.$nextTick(_ => window.print())
            }
        }
    }
</script>

<style scoped>
    .result{
        width: 100vw;
        /*height: 100vh;*/
        /*position: fixed;*/
        /*overflow: auto;*/
        /*left: 0;*/
        /*top: 0;*/
    }
    .item{
        width: 700px;
        border: 1px solid #ddd;
    }
</style>
